<template>
  <Dialog v-model="dialogVisible" title="选择上级代理" :scroll="true">
    <el-form ref="formRef" v-loading="formLoading" :model="queryParams">
      <el-form-item label="代理名称" prop="agentName">
        <el-input
          v-model="queryParams.agentName"
          placeholder="请输入代理名称"
          class="!w-240px"
          v-loading="formLoading"
        >
          <template #append>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /></el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-table :data="list">
      <!-- <el-table-column label="代理ID">
        <template #default="scope">
          <div class="flex" v-if="scope.row.agentId">
            <el-text truncated>{{ scope.row.agentId }}</el-text>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="代理名称" align="left">
        <template #default="scope">
          <div class="flex">
            <el-text truncated>{{ scope.row.agentName }}</el-text>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名|昵称" align="left">
        <template #default="scope">
          <div class="flex" v-if="scope.row.user">
            <div class="w-[48px] h-[48px] m-r-10px">
              <el-image
                :preview-teleported="true"
                :src="scope.row?.user?.avatar"
                class="w-[48px] h-[48px] rounded-4px align-middle"
              />
            </div>

            <el-text truncated>{{ scope.row.user.nickname }}</el-text>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="代理等级" align="center" min-width="80px" prop="agentLevelName" />
      <el-table-column label="权重" align="center" min-width="50px" prop="agentLevel" />

      <el-table-column label="操作" align="center" width="100px">
        <template #default="scope">
          <el-button type="primary" @click="submitForm(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </Dialog>
</template>
<script lang="ts" setup>
import * as BrokerageUserApi from '@/api/mall/trade/agent/user'

/** 修改上级代理商表单 */
defineOptions({ name: 'UpdateBindUserForm' })

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  agentName: null
})
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formRef = ref() // 表单 Ref

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await BrokerageUserApi.getBrokerageUserPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 打开弹窗 */
const open = async () => {
  // 反显上级代理商
  await getList()
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
/** 修改上级代理商 */
const submitForm = async (row) => {
  // 发送操作成功的事件
  emit('success', row)
  dialogVisible.value = false
}
</script>
